<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js和css做的进度条</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			@keyframes jdt{
				0%{
					background: pink;
					width: 0%;
				}
				100%{
					width: 100%;
					background:pink;
				}
			}
			div{
				width: 100%;
				height: 20px;
				margin: 20px auto;
				border: 2px solid #000000;
			}
			p{
				text-align: right;
				animation: jdt 100s steps(100);
			}
		</style>
	</head>
	<body>
		<div>
			<p>0%</p>
		</div>
		<script type="text/javascript">
			var sj = document.querySelector('p');
			var mm = 0;
			setInterval(dsqi,1000);
			
			function dsqi(){
				if(mm <100){
					sj.innerText = mm+'%';
					mm++;
				}else{
					clearInterval(dsqi);
					sj.innerText = mm+'%';
					sj.style.background = 'pink';
				}
			}
		</script>
	</body>
</html>
